<!--
  作者：xhr
  时间：2022年08月26日 11:04:46
-->
<template>
  <div>
    <!-- 头部 -->
    <div class="header">
      <p>用户管理</p>
    </div>
    <!-- 主体 -->
    <div class="container" style="margin: 40px auto; width: 1190px">
      <div style="margin: 8px 0; display: flex; position: relative">
        <el-button type="info" @click="add">新建</el-button>
        <el-input
          v-model="keyword"
          placeholder="按姓名搜索"
          style="width: 300px; margin-left: 20px"
          clearable
          @input="search(keyword)"
          @clear="back"
        ></el-input>
        <el-button type="info" style="position: absolute; right: 0"
          >撤销</el-button
        >
      </div>
      <el-table
        :data="tableData"
        stripe
        style="width: 100%"
        size="big"
        ref="multipleTable"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="50"> </el-table-column>
        <el-table-column
          prop="username"
          label="姓名"
          width="80"
        ></el-table-column>
        <el-table-column prop="age" label="年龄" width="80"></el-table-column>
        <el-table-column prop="sex" label="性别" width="80"></el-table-column>
        <el-table-column
          prop="telephone"
          label="联系电话"
          width="120"
        ></el-table-column>
        <el-table-column
          prop="address"
          label="详细地址"
          width="600"
        ></el-table-column>
        <el-table-column fixed="right" label="操作" width="150">
          <template slot-scope="scope">
            <el-button @click="update(scope.row)" size="mini" type="info"
              >编辑
            </el-button>
            <el-popconfirm
              title="确定删除吗？"
              style="margin-left: 5px"
              @confirm="del_one(scope.row.id)"
            >
              <el-button type="info" size="mini" slot="reference"
                >删除
              </el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <el-popconfirm
        title="确定删除吗？"
        style="margin-left: 5px"
        @confirm="del_many"
      >
        <el-button style="margin-top: 8px" type="info" slot="reference"
          >批量删除</el-button
        >
      </el-popconfirm>

      <!-- 公用弹窗 -->

      <div>
        <el-dialog
          title="新建/编辑用户"
          :visible.sync="dialogVisible"
          width="35%"
          style="text-align: center"
        >
          <el-form
            :inline="true"
            label-position="top"
            label-width="40%"
            :model="form"
            style="background-color: aqua"
          >
            <el-form-item label="姓名">
              <el-input v-model="form.username"></el-input>
            </el-form-item>
            <el-form-item label="性别">
              <el-select v-model="form.sex" placeholder="">
                <el-option label="男" value="男"></el-option>
                <el-option label="女" value="女"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="联系电话">
              <el-input v-model="form.telephone"></el-input>
            </el-form-item>
            <el-form-item label="年龄" style="width: 215px">
              <el-input v-model="form.age"></el-input>
            </el-form-item>

            <el-form-item label="详情地址">
              <el-cascader
                :options="options"
                clearable
                style="width: 180px"
                v-model="form.AddRange"
              ></el-cascader>
              <el-input
                v-model="form.AddDetail"
                placeholder="请输入详细地址"
                style="width: 240px; padding-left: 8px; background-color: aqua"
              ></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button
              style="background-color: rgb(63, 165, 248); color: aliceblue"
              @click="save"
              >保 存</el-button
            >
          </span>
        </el-dialog>
      </div>
      <div></div>
    </div>
  </div>
</template>

<script>
var count = 4;
var curddata = [];
export default {
  name: "HongYi",
  data() {
    return {
      multipleSelection: [],
      keyword: "",
      form: {},
      dialogVisible: false,
      options: [
        {
          value: "广东省",
          label: "广东省",
          children: [
            {
              value: "广州市",
              label: "广州市",
              children: [
                {
                  value: "天河区",
                  label: "天河区",
                },
                {
                  value: "荔湾区",
                  label: "荔湾区",
                },
                {
                  value: "花都区",
                  label: "花都区",
                },
              ],
            },
            {
              value: "茂名市",
              label: "茂名市",
              children: [
                {
                  value: "茂南区",
                  label: "茂南区",
                },
                {
                  value: "电白区",
                  label: "电白区",
                },
              ],
            },
          ],
        },
      ],
      tableData: [
        {
          id: 1,
          username: "黄志昕1",
          sex: "男",
          age: 1,
          telephone: "18078099902",
          address: "广东省广州市天河区启明大街83号",
          AddRange: ["广东省", "广州市", "天河区"],
          AddDetail: "启明大街83号",
        },
        {
          id: 2,
          username: "呵呵呵2",
          sex: "男",
          age: 1,
          telephone: "18078099902",
          address: "广东省广州市天河区启明大街83号",
          AddRange: ["广东省", "广州市", "天河区"],
          AddDetail: "启明大街83号",
        },
        {
          id: 3,
          username: "嗨嗨嗨3",
          sex: "男",
          age: 1,
          telephone: "18078099902",
          address: "广东省广州市天河区启明大街83号",
          AddRange: ["广东省", "广州市", "天河区"],
          AddDetail: "启明大街83号",
        },
        {
          id: 4,
          username: "嘿嘿嘿4",
          sex: "男",
          age: 1,
          telephone: "18078099902",
          address: "广东省广州市天河区启明大街83号",
          AddRange: ["广东省", "广州市", "天河区"],
          AddDetail: "启明大街83号",
        },
      ],
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
     this.tableData= JSON.parse(sessionStorage.getItem("temp_data"))
     
  },
  updated() {
    sessionStorage.setItem("temp_data", JSON.stringify(curddata));
  },
  methods: {
    del_many() {
      var t = [];
      this.multipleSelection.forEach((e) => {
        t.push(e.id);
      });
      t.forEach((item) => {
        this.tableData = this.tableData.filter((items) => items.id !== item);
      });
      curddata = this.tableData;
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    back() {
      this.tableData = curddata;
    },
    search(keyword) {
      this.tableData = curddata.filter((e) => {
        return e.username.indexOf(keyword) !== -1;
      });
    },
    add() {
      this.form = {};
      this.dialogVisible = true;
    },
    update(row) {
      this.form = JSON.parse(JSON.stringify(row));

      this.dialogVisible = true;
    },
    save() {
      var _this = this;
      if (this.form.id) {
        if (
          this.form.AddRange &&
          this.form.AddDetail &&
          this.form.username &&
          this.form.age &&
          this.form.telephone
        ) {
          var temp1 = "";

          this.form.AddRange.forEach((e) => {
            temp1 += e;
          });

          temp1 += this.form.AddDetail;
          this.form.address = temp1;

          var t = this.tableData.find(function (curr) {
            return curr.id === _this.form.id;
          });

          t.username = this.form.username;
          t.address = this.form.address;
          t.age = this.form.age;
          t.telephone = this.form.telephone;
          t.AddDetail = this.form.AddDetail;

          this.dialogVisible = false;
          this.$message({
            type: "success",
            message: "编辑成功",
          });
          curddata = this.tableData;
        } else {
          this.$message({
            type: "error",
            message: "请输入完整数据",
          });
        }
      } else {
        if (
          this.form.AddRange &&
          this.form.AddDetail &&
          this.form.username &&
          this.form.age &&
          this.form.telephone
        ) {
          count++;
          var temp = "";

          this.form.AddRange.forEach((e) => {
            temp += e;
          });
          temp += this.form.AddDetail;
          this.form.address = temp;
          this.form.id = count;
          this.tableData.push(this.form);
          this.dialogVisible = false;
          this.$message({
            type: "success",
            message: "新增成功",
          });
          curddata = this.tableData;
        } else {
          this.$message({
            type: "error",
            message: "请输入完整数据",
          });
        }
      }
    },
    del_one(id) {
      this.tableData = this.tableData.filter((item) => item.id != id);
      console.log("成功了");
      curddata = this.tableData;
      this.$message({
        type: "success",
        message: "删除成功",
      });
    },
  },
};
</script>

<style scoped>
.header {
  height: 100px;
  line-height: 100px;
  background: rgb(236, 236, 236);
  text-align: center;
}

.el-table {
  border: 1px solid rgb(245, 245, 245);
}
.el-button {
  color: #000;
  border: 0;
  background-color: rgb(245, 245, 245);
}
.el-form-item {
  text-align: left;
}
</style>
